<template>
  <view class="message-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">消息</text>
        <view class="nav-actions">
          <text class="iconfont-v2 icon-gengduo action-icon"></text>
          <text class="iconfont-v2 icon-xiaoxi action-icon"></text>
        </view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'all' }"
        @click="switchTab('all')"
      >
        <text>全部</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'my' }"
        @click="switchTab('my')"
      >
        <text>我发起</text>
      </view>
    </view>

    <!-- 消息列表 -->
    <List
      :items="filteredMessages"
      variant="card"
      @item-click="openMessage"
    >
      <template #left="{ item }">
        <!-- 头像/图标 -->
        <view class="message-avatar">
          <image 
            v-if="item.avatar" 
            :src="item.avatar" 
            class="avatar-img"
            mode="aspectFill"
          />
          <view 
            v-else 
            class="avatar-icon" 
            :style="{ backgroundColor: item.iconColor }"
          >
            <text class="iconfont-v2" :class="item.icon"></text>
          </view>
          <!-- 在线状态指示器 -->
          <view v-if="item.isOnline" class="online-indicator"></view>
        </view>
        
        <!-- 消息内容 -->
        <view class="message-content">
          <view class="message-header">
            <text class="sender-name">{{ item.senderName }}</text>
            <text class="message-time">{{ item.time }}</text>
          </view>
          <view class="message-preview">
            <text class="message-text" :class="{ unread: !item.isRead }">
              {{ item.preview }}
            </text>
          </view>
        </view>
      </template>
      
      <template #right="{ item }">
        <!-- 未读消息标识 -->
        <view v-if="!item.isRead" class="unread-badge"></view>
        <!-- 箭头 -->
        <text class="iconfont-v2 icon-jiantouyou item-arrow"></text>
      </template>
      
      <!-- 空状态插槽 -->
      <template #empty>
        <EmptyState 
          type="message"
          title="暂无消息"
          description="您还没有收到任何消息"
        />
      </template>
    </List>
  </view>
</template>

<script>
import List from '@/components/common/List.vue'
import EmptyState from '@/components/common/EmptyState.vue'

export default {
  name: 'MessagePage',
  components: {
    List,
    EmptyState
  },
  data() {
    return {
      activeTab: 'all',
      messages: [
        {
          id: 1,
          type: 'notification',
          senderName: '丛台区...发布了新的职位',
          preview: '32位Boss新发布',
          time: '06:32',
          isRead: false,
          icon: 'icon-zhiwei',
          iconColor: '#FF9500',
          avatar: null
        },
        {
          id: 2,
          type: 'chat',
          senderName: '李蛋 LDD创意 · 招聘者',
          preview: '[送达]您正在招的美工我很有兴趣,如...',
          time: '06:32',
          isRead: false,
          avatar: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
          isOnline: false
        },
        {
          id: 3,
          type: 'chat',
          senderName: '李蛋 LDD创意 · 招聘者',
          preview: '[已读]您正在招的美工我很有兴趣,如...',
          time: '06:32',
          isRead: true,
          avatar: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
          isOnline: true
        },
        {
          id: 4,
          type: 'system',
          senderName: '通知 系统提示',
          preview: '微信通知已开启,当有新消息时将会发送服...',
          time: '6月23日',
          isRead: true,
          icon: 'icon-tongzhi',
          iconColor: '#00C896',
          avatar: null
        },
        {
          id: 5,
          type: 'chat',
          senderName: '李蛋 LDD创意 · HR负责人',
          preview: '您正在于Boss李蛋沟通',
          time: '6月19日',
          isRead: true,
          avatar: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
          isOnline: false
        },
        {
          id: 6,
          type: 'chat',
          senderName: '李旭浩 李蛋创意设计 · 经理',
          preview: '我想要和您交换联系方式,您是否同意',
          time: '06:32',
          isRead: true,
          avatar: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg',
          isOnline: false
        }
      ]
    }
  },
  computed: {
    filteredMessages() {
      if (this.activeTab === 'my') {
        return this.messages.filter(msg => msg.type === 'chat' && msg.senderName.includes('我'));
      }
      return this.messages;
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    openMessage(message) {
      // 标记为已读
      if (!message.isRead) {
        message.isRead = true;
      }
      
      // 根据消息类型跳转到不同页面
      if (message.type === 'chat') {
        uni.navigateTo({
          url: `/pages/bussiness/chat-detail?id=${message.id}&name=${message.senderName}`
        });
      } else if (message.type === 'notification') {
        uni.navigateTo({
          url: `/pages/bussiness/job-list`
        });
      } else if (message.type === 'system') {
        uni.navigateTo({
          url: `/pages/bussiness/system-notification`
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.message-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  background: #ED6567;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }
    
    .nav-actions {
      display: flex;
      gap: 20rpx;
      
      .action-icon {
        font-size: 32rpx;
        color: white;
      }
    }
  }
}

/* 标签栏 */
.tab-bar {
  background: white;
  display: flex;
  border-bottom: 2rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      color: #ED6567;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #ED6567;
        border-radius: 2rpx;
      }
    }
  }
}

/* 消息列表 */
.message-list {
  background: white;
  
  .message-item {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 2rpx solid #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f8f9fa;
    }
    
    &:last-child {
      border-bottom: none;
    }
    
    .message-avatar {
      position: relative;
      margin-right: 24rpx;
      
      .avatar-img {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        background: #f0f0f0;
      }
      
      .avatar-icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont-v2 {
          font-size: 40rpx;
          color: white;
        }
      }
      
      .online-indicator {
        position: absolute;
        bottom: 4rpx;
        right: 4rpx;
        width: 20rpx;
        height: 20rpx;
        background: #00C896;
        border: 4rpx solid white;
        border-radius: 50%;
      }
    }
    
    .message-content {
      flex: 1;
      min-width: 0;
      
      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8rpx;
        
        .sender-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .message-time {
          font-size: 24rpx;
          color: #999;
          margin-left: 16rpx;
        }
      }
      
      .message-preview {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .message-text {
          font-size: 26rpx;
          color: #666;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          
          &.unread {
            color: #333;
            font-weight: 500;
          }
        }
        
        .unread-badge {
          width: 16rpx;
          height: 16rpx;
          background: #ED6567;
          border-radius: 50%;
          margin-left: 12rpx;
          flex-shrink: 0;
        }
      }
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
  
  .empty-icon {
    font-size: 120rpx;
    color: #ccc;
    margin-bottom: 24rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .message-item {
    padding: 20rpx 24rpx;
    
    .message-avatar {
      .avatar-img,
      .avatar-icon {
        width: 72rpx;
        height: 72rpx;
      }
      
      .avatar-icon .iconfont-v2 {
        font-size: 32rpx;
      }
    }
    
    .message-content {
      .message-header .sender-name {
        font-size: 26rpx;
      }
      
      .message-preview .message-text {
        font-size: 24rpx;
      }
    }
  }
}
</style>
